<template>
    <p>Count: {{ count }}</p>
    <p>Flag: {{ flag }}</p>
    <button @click="handleClick">Increment</button>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, toRefs } from "vue";

export default {
    name: "setup-com",
    // props 要在 props:[] 里声明
    props: {
        flag: {
            type: Boolean,
            required: true,
        },
    },
    components: {},
    setup(props, context) {
        // props 和 context 都是响应式的
        // setup 中没有 this，可以通过 context 访问
        console.log("setup", props, context);

        const parent = context.attrs.ComponentsName || "parent";

        console.log("parent", parent);

        // 解构 props 需要使用 toRefs 保持响应式
        const { flag } = toRefs(props);

        const count = ref(0);

        function handleClick() {
            count.value += 1;
        }

        onBeforeMount(() => {
            console.log("onBeforeMount called");
        });

        onMounted(() => {
            console.log("onMounted called");
        });

        onBeforeUpdate(() => {
            console.log("onBeforeUpdate called");
        });

        onUpdated(() => {
            console.log("onUpdated called");
        });

        onBeforeUnmount(() => {
            console.log("onBeforeUnmount called");
        });

        onUnmounted(() => {
            console.log("onUnmounted called");
        });

        return {
            ComponentsName: parent,
            count,
            flag,
            handleClick,
        };
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("created");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted() {
        console.log("mounted");
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated() {
        console.log("updated");
    },
    beforeUnmount() {
        console.log("beforeUnmount");
    },
    unmounted() {
        console.log("unmounted");
    },
};
</script>

<style scoped></style>
